<template>
  <div>
    <el-cascader
      v-if="isShow"
      ref="cascader"
      key="dictValue"
      v-model="industryFocusList"
      :props="props"
      filterable
      class="no-print"
      style="width: 300px"
      @change="handleChange"
    />
    <div id="print" style="display:none;">
      {{ sLabel }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'FocusIndustry',
  props: {
    industryData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      allList: [],
      sLabel: '',
      // 聚焦行业
      industryFocusList: [],
      // 多级联动的值 => 会是一个数组
      value: [],
      isShow: false,
      props: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          // node 节点数据 node.value => 当前节点的值//v-model绑定值清空
          // level: 层级 => 1,2,3,4
          const { level } = node
          // 动态节点
          const nodes = []
          // 为1代表第一次请求
          const type = level === 0 ? 'deal_industry_focus' : node.data.type
          this.getDicts(type).then((res) => {
              if (res.code === -1) {
                this.msgFn('error', res.message)
                return
              }
              // 节点数组
              res.data.map((item) => {
                // obj里的键值是官方要求的
                const obj = {
                  value: item.dictValue,
                  label: item.dictLabel,
                  type: item.childDict,
                  leaf: item.childDict === null || item.childDict === ''
                }
                nodes.push(obj)
              })
              this.allList = [...this.allList, ...nodes]
              // resolve 节点返回
              resolve(nodes)
            })
            .catch((error) => {
              console.log(error)
            })
        }
      }
    }
  },
  watch: {
    industryData: {
      handler(val) {
        this.isShow = false
        setTimeout(() => {
          this.isShow = true
        }, 300)
        this.industryFocusList = []
        this.industryFocusList = val
      },
      deep: true,
      immediate: true
    },
    allList: {
      handler(val) {
        if (val.length > 0) {
          const res = new Map()
          var allList = val.filter((v) => !res.has(v.value) && res.set(v.value, 1))
          this.sLabel = ''
          var names = []
          this.industryData.forEach(v => {
            var row = allList.find(res => res.value === v)
            if (row) {
              names.push(row.label)
            }
          })
          this.sLabel = names.join('/')
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 监听数据变化
    handleExpandChange() {
      this.$refs.cascader.panel.lazyLoad()
    },
    // 监听数据变化
    handleChange(value) {
      this.$emit('industryFocusList', value)
    }
  }
}
</script>

<style scoped>

</style>
